<template>
  <div class="movie-card">
    <div class="movie-poster">
      <img :src="movie.poster" :alt="movie.title">
      <div class="movie-rating">
        <span>{{ movie.rating }}</span>
      </div>
    </div>
    <div class="movie-info">
      <h3 class="movie-title">{{ movie.title }}</h3>
      <p class="movie-genre">{{ movie.genre }}</p>
      <p class="movie-year">{{ movie.year }}</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  movie: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      title: '',
      poster: '',
      rating: 0,
      genre: '',
      year: ''
    })
  }
});
</script>

<style scoped>
@import '../styles/MovieCard.css';
</style>